<template>
  <div class="tab-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="用户信息" name="user_list"></el-tab-pane>
      <el-tab-pane label="订单列表" name="order_list"></el-tab-pane>
      <el-tab-pane label="发票列表" name="invoice_list"></el-tab-pane>
      <el-tab-pane label="会员" name="vip_list"></el-tab-pane>
      <el-tab-pane label="账户状态" name="account_status_list"></el-tab-pane>
      <!-- 添加更多 Tab -->
    </el-tabs>
    <div class="tab-content">
      <RouterView></RouterView> <!-- 渲染嵌套的子页面 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 根据路由名称映射到 Tab 名称
const tabMap = {
  user_list: 'user_list',
  order_list: 'order_list',
  invoice_list: 'invoice_list',
  vip_list: 'vip_list',
  account_status_list: 'account_status_list',
};

// 动态绑定激活的 Tab
let activeTab = ref(tabMap[route.name as keyof typeof tabMap] || 'user_list'); // 默认激活第一个 Tab

const handleTabClick = (tab: any) => {
  // 直接使用 Tab 的 name 属性作为路由名称
  router.push({ name: tab.props.name });
};

watch(
  () => route.name,
  (newRouteName) => {
    if (newRouteName && tabMap[newRouteName as keyof typeof tabMap]) {
      activeTab.value = newRouteName as keyof typeof tabMap;
    }
  },
  { immediate: true } // 立即执行一次 watcher，确保首次加载时正确设置激活的 Tab
);
</script>

<style scoped>
.tab-container {
  /* 样式定义 */
  
}
.tab-content {
  height: calc(100vh - 60px);
}
.el-tabs {
  --el-color-primary:#FF9500;
}

</style>